<template>
	<view v-if="istrue" class="content">
		<!-- t1 -->
		<view class="pos">
			<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500">
				<swiper-item v-for="(item , index) in homeSlide" :key="index">
					<!-- <image :src="item.ImgUrl" mode="aspectFill"></image> -->
					<view class="bannerk">
						<image style="height: 450rpx;" mode="aspectFill" :src="item.ImgUrl">
						</image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- t2 -->
		<view class="plr20 flex_start flex_items"
			style="box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0,0,0,0.12);height:200rpx;">
			<view class="flex_center flex_items bgwhite mr30"
				style="border-radius: 16rpx;width: 31%;border-right: 1px solid #EDEDED;height: 200rpx;"
				@click="gospots('yq')">
				<view class="flex_column flex_items">
					<image :src="yqjsimg" style="width:80rpx;height:80rpx" mode="aspectFill">
					</image>
					<text class="mt20 f28" style="color: #333333;">
						园区介绍
					</text>
				</view>
			</view>
			<view class="flex_center flex_items bgwhite mr30"
				style="border-radius: 16rpx;width: 31%;border-right: 1px solid #EDEDED;height: 200rpx;"
				@click="gospots('zg')">
				<view class="flex_column flex_items">
					<image :src="zgjsimg" style="width: 80rpx;height:80rpx" mode="aspectFill">
					</image>
					<text class="mt20 f28" style="color: #333333;">
						展馆介绍
					</text>
				</view>
			</view>
			<view class="flex_center flex_items bgwhite" style="border-radius: 16rpx;width: 31%;height: 200rpx;"
				@click="gospots('yy')">
				<view class="flex_column flex_items">
					<image :src="mpyyimg" style="width: 80rpx;height:80rpx" mode="aspectFill">
					</image>
					<text class="mt20 f28" style="color: #333333;">
						门票预约
					</text>
				</view>
			</view>
		</view>
		<!-- t3 -->
		<view class="p20 mt10" style="background: #f5f5f5;">
			<view class="f36 flex_start flex_items">
				<text class="bold" style="color: #1A1A1A;">智慧导览</text>
			</view>
			<view @click="travelline" class="pos mt20 divbox" style="border-radius: 10upx;">
				<image class="" src="https://p5.itc.cn/q_70/images03/20220112/3d7408651928436f91e405da7bba6ffa.jpeg"
					style="width:100%;display: block;" mode="aspectFill">
				</image>
				<view class="abs flex_items flex-center"
					style="width:307rpx;height:82rpx;line-height:82rpx;bottom:-50rpx;left: 0;right: 0;margin: auto;">
					<image class="abs" :src="ksywimg" mode="aspectFill" style="width: 100%;height:82rpx;">
					</image>
					<text class="bold f32 f-center" style="z-index: 3;color: #FFF26C;">开始游玩</text>
				</view>
			</view>
		</view>
		<!-- t4 -->
		<view class="p20 mb30" style="background: #f5f5f5;">
			<view class="f36 flex_start flex_items">
				<text class="bold" style="color: #1A1A1A;">走进文化园</text>
			</view>
			<view class="flex_column mt20">
				<view v-for="(item,index) in cuturs" :key="index" class="flex_column mt20"
					style="border-radius: 10upx;overflow: hidden;background: #fff;" @click.stop="godetail(item.Id)">
					<image :src="item.CoverImg" mode="aspectFill"
						style="width: 100%;height:600rpx;border-top-right-radius: 10rpx;border-top-left-radius: 10rpx;">
					</image>
					<text class="mt30 f30 plr20">{{item.Title}}</text>
					<text class="mt10 f30 plr20" style="color: #a09c9c;">{{item.Abstract}}</text>
					<text class="mt10 f24 pb20 plr20" style="color: #ccc;">2023-12-31</text>
				</view>
			</view>
		</view>
	</view>
	</view>
	</view>
</template>

<script>
	import {
		GetBanners,
		GetArticleList,
		Getgood,
		getbluedetail
	} from '@/api/api.js';
	export default {
		data() {
			return {
				homeSlide: [],
				cuturs: [],
				imgUrl: '',
				yqjsimg: require('../../static/yqimg/yqjs.png'),
				zgjsimg: require('../../static/yqimg/zgjs.png'),
				mpyyimg: require('../../static/yqimg/mpyy.png'),
				ksywimg: require('../../static/yqimg/ksyw.png'),
				istrue: false
			}
		},
		onLoad(option) {
			this.imgUrl = this.$category.api.imgUrl
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					console.log(res)
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
			// this.getBanner()
		},
		onShow() {
			this.getBanner()
		},
		methods: {
			getBanner() {
				uni.showLoading({
					title: '加载中...'
				})
				GetBanners({
					ParentId: this.$category.api.banner,
					layers: 2
				}).then(res => {
					console.log(res)
					this.homeSlide = res.Data
					this.getList()
				})
			},
			getList() {
				GetArticleList({
					ArticleCategoryId: this.$category.api.Culturalworld,
					AuditStatus: 2,
				}).then(res => {
					console.log(res)
					this.cuturs = res.Data
					// this.openBluetoothAdapter()
					this.istrue = true
					uni.hideLoading()
				})
			},
			gospots(ty) {
				let title = '园区介绍'
				let id = '3230'
				if (ty == 'zg') {
					id = '3231'
					title = "展馆介绍"
				}
				if (ty == 'yy') {
					uni.showToast({
						title: '暂未开放',
						icon: "none"
					})
					return false
				}
				uni.navigateTo({
					url: '../pointdetail/index?title=' + title + "&Id=" + id
				})
			},
			travelline() {
				uni.navigateTo({
					url: "../Touristroutes/tourdetail"
				})
			},
			godetail(id) {
				uni.navigateTo({
					url: '../pointdetail/index?Id=' + id
				})
			},
			handlechange(e) {
				this.mycurrent = e.detail.current
			},
			gzan(id) {
				// uni.showToast({
				// 	title: '点赞成功',
				// 	icon: 'success'
				// })
				// return false
				Getgood({
					Id: id
				}).then(res => {
					console.log(res)
					if (res.ErrorCode == 0) {
						uni.showToast({
							title: '点赞成功',
							icon: 'success'
						})
					}
				})
			},
		},
	}
</script>

<style>
	.swiper {
		height: 400upx;
	}

	swiper-item image {
		width: 100%;
		height: 400upx;
	}

	.txtleft {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 3;
	}

	.bannerk:before {
		top: -10px;
		border-radius: 25% 0 0 0;
		transform: skewX(25deg);
		overflow: hidden;
	}
</style>
